<template>
    <div class="banner">
        <el-carousel :interval="5000" arrow="always" height="400px">
            <el-carousel-item v-for="item in banner_list">
                <!-- 只跳自己的路径，不会跳第三方 百度，cnblogs，-->
                <div v-if="!(item.link.indexOf('http')>-1)">
                    <router-link :to="item.link">
                        <img :src="item.image" alt="">
                    </router-link>
                </div>
                <div v-else>
                    <a :href="item.link">
                        <img :src="item.image" alt="">
                    </a>
                </div>


            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>

    export default {
        name: "Banner",
        data() {
            return {
                banner_list: []
            }
        },
        created() {
            this.$axios.get(this.$settings.base_url + 'home/banner/').then(res => {
                if (res.data.status == 100) {
                    this.banner_list = res.data.result
                    console.log(this.banner_list)
                }
            })
        }
    }
</script>

<style scoped>


    el-carousel-item {
        height: 400px;
        min-width: 1200px;
    }

    .el-carousel__item img {
        height: 400px;
        margin-left: calc(50% - 1920px / 2);
    }
</style>